<template>
  <div>
    <div class="card">
      <el-card class="box-card" shadow="always">
        <div slot="header" class="clearfix">
          <span>路由选项</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="addroute">新增 +</el-button>
        </div>
        <div v-for="o in 1" :key="o" class="text item">
          <el-tree ref="tree" :data="datatree" node-key="id" draggable @node-drop="xzDrop">
            <div class="custom-tree-node" slot-scope="{ node, data }">
              <div>{{ data.name }}</div>
              <div style="float: right">
                <el-button
                  v-if="data.level / 1 == 1"
                  icon="el-icon-circle-plus"
                  type="primary"
                  size="mini"
                  @click="addOne(data)"
                ></el-button>
                <el-button
                  v-if="data.level / 2 == 1"
                  icon="el-icon-circle-plus"
                  type="info"
                  size="mini"
                  @click="childrenadd(data, node)"
                ></el-button>
                <el-button icon="el-icon-edit" type="success" size="mini" @click="change(data)"></el-button>
                <el-button
                  icon="el-icon-delete-solid"
                  type="danger"
                  size="mini"
                  @click="remove(node, data)"
                ></el-button>
              </div>
            </div>
          </el-tree>
        </div>
      </el-card>
      <div class="box" v-show="showstatus">
        <Menu ref="menu" :send="message" :parents="parentsId" :chstatus="status"></Menu>
      </div>
    </div>
  </div>
</template>

<script>
import superadmin from '@/api/superadmin'
import Menu from './Menu/index.vue'
export default {
  data() {
    return {
      showstatus: false,
      status: 0,
      datatree: [],
      problemForm: {
        content: '',
        icon: '',
        level: 0,
        name: '',
        parentsId: 0,
        path: '',
        sort: '',
        type: 0,
      },
      message: {},
      parentsId: 0,
    }
  },
  methods: {
    subProblem() {
      superadmin.sentrouter(this.problemForm)
    },
    addOne(data) {
      this.parentsId = data.permissionId
      this.$refs.menu.changemes(2)
      this.showstatus = true
    },
    addroute() {
      this.showstatus = true
      this.$refs.menu.changemes(2)
    },
    remove(data) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          superadmin.excision(data.data.permissionId).then(e => {
            if (e.code == 200) {
              this.$message({
                type: 'success',
                message: '删除成功!',
              })
              this.getlistall()
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    childrenadd(data, node) {
      this.showstatus = true
      this.status = 1
      this.$refs.menu.changemes(3)
    },
    change(data) {
      this.message = data
      this.status = 0
      this.$refs.menu.changemes(1)
      this.showstatus = true
    },
    getlistall() {
      superadmin.listall().then(e => {
        e.data.forEach(item => {
          let childlist = {
            name: item.name,
            permissionId: item.permissionId,
            path: item.path,
            icon: item.icon,
            level: item.level,
            route: item.route,
            content: item.content,
            parentsId: item.parentsId,
            sort: item.sort,
            children: [],
          }
          if (item.children) {
            item.children.forEach(items => {
              childlist.children.push({
                name: items.name,
                permissionId: items.permissionId,
                path: items.path,
                icon: items.icon,
                level: items.level,
                content: items.content,
                parentsId: items.parentsId,
                route: items.route,
                sort: items.sort,
              })
            })
          }
          this.datatree.push(childlist)
        })
      })
    },
    problemClose() {
      this.problemForm = {
        id: 0,
        subId: 0,
        level: 0,
        typeName: '',
        number: '',
      }
    },
    // 拖拽
    xzDrop(draggingNode, dropNode, dropType) {
      let data = {
        id: draggingNode.data.permissionId,
        level: dropType === 'inner' ? dropNode.data.level + 1 : dropNode.data.level,
        name: draggingNode.data.name,
        parentsId: dropType === 'inner' ? dropNode.data.permissionId : dropNode.parent.data.permissionId || 0,
      }
      // console.log(data)
      superadmin.changeper(data).then(e => {
        if (e.code == 200) {
          this.$message({
            message: '修改成功！',
            type: 'success',
          })
        } else {
          this.$message({
            message: e.msg,
            type: 'error',
          })
        }
      })
    },
  },
  created() {
    this.getlistall()
  },
  components: {
    Menu,
  },
}
</script>

<style lang="scss" scoped>
@import './MenuManagement.scss';
</style>
